<template>
    <h1>{{ showTitle }}</h1>
    <form>

        标题 : <input type="text" v-model="form.title" name="title" placeholder="请输入代办标题">
        日期 : <input type="date" v-model="form.date" name="date">
        <div>
            <button class="add" @click.prevent="onAdd">提交</button>
        </div>
        <div>
            <button @click.prevent="onSubmit">添加</button>
        </div>
    </form>


    <table @scroll="handelScroll">
        <thead>
            <tr class="thead">
                <th class="thTitle">标签</th>
                <th>日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tr class="listTop"></tr>
        <tr v-for="item in showList" :key="item.id">
            <td :title="item.title">{{ item.title }}</td>
            <td>{{ item.date }}</td>
            <td>
                <button class="editBtn" @click="setList(item.id)">编辑</button>
                <button @click="onDel(item.id)">删除</button>
            </td>
        </tr>
        <tr class="listBottom"></tr>

    </table>
</template>

<script>

export default {
    data() {
        return {
            list: localStorage.daibanList ? JSON.parse(localStorage.daibanList) : [],
            type: 1,
            id: undefined,
            upIndex: 0,
            form: {
                title: '',
                date: ''
            }
        }
    },
    computed: {
        showTitle() {
            return this.type === 1 ? '添加' : `编辑:${this.form.title}`
        },
        showList() {
            return this.list.slice(this.upIndex, this.upIndex + 6)
        },
        listLength() {
            return this.list.length
        }
    },
    methods: {
        // 新增数据
        onAdd() {

            if (this.form.title === "" || this.form.date === "") {
                return alert("请按照要求填写表单")
            }
            if (this.type === 1) {
                this.list.push({
                    id: Date.now(),
                    ...this.form
                })
            } else {
                this.list.find(item => {
                    if (item.id === this.id) {
                        item.title = this.form.title
                        item.date = this.form.date
                        this.type = 1
                    }
                })
            }
            localStorage.daibanList = JSON.stringify(this.list)
            // 添加测试数据屏蔽这里可以一直点击添加
            this.onSubmit()
        },
        // 添加
        onSubmit() {
            this.form.date = ''
            this.form.title = ''
            this.type = 1
        },
        // 编辑
        setList(id) {

            const item = this.list.find(item => item.id === id)
            this.form.title = item.title
            this.form.date = item.date
            this.type = 2
            this.id = id
        },
        //删除
        onDel(id) {
            this.list = this.list.filter(item => item.id !== id)
            localStorage.daibanList = JSON.stringify(this.list)
        },
        handelScroll(e) {
            const index = e.target.scrollTop
            // q:向上取整的方法
            this.upIndex = Math.floor(index / 35)
        }
    }
}
</script>

<style>
h1 {
    font-weight: normal;
    border-bottom: 1px solid #ccc;
}

.add {
    margin: 10px 0;
}

.editBtn {
    margin-right: 5px;
}

.thTitle {
    width: 286px;
    /* 文本单行显示 超出部分隐藏 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table {
    display: block;
    height: v-bind(35 * 6 + 'px');
    overflow-y: auto;
    width: 505px;
    border-collapse: collapse;
    /* border-collapse: separate; */
    border: 1px solid #ccc;

}

td {
    height: 35px;
    border: 1px solid #ccc;
    padding: 5px;
}

th {
    height: 35px;
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 0 1px inset #ccc;
}

thead {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 99;
}

.listTop {
    height: v-bind(upIndex * 35 + 'px')
}

.listBottom {
    height: v-bind((listLength - upIndex - 5) * 35 + 'px');
}
</style>